
<!DOCTYPE html>
<html class="no-js css-menubar" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="description" content="bootstrap material admin template">
    <meta name="author" content="">

    <title>Colors | Remark Material Admin Template</title>

    <link rel="apple-touch-icon" href="../assets/images/apple-touch-icon.png">
    <link rel="shortcut icon" href="../assets/images/favicon.ico">

    <!-- Stylesheets -->
    <link rel="stylesheet" href="../../global/css/bootstrap.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/css/bootstrap-extend.min.css?v2.2.0">
    <link rel="stylesheet" href="../assets/css/site.min.css?v2.2.0">

    <!-- Skin tools (demo site only) -->
    <link rel="stylesheet" href="../../global/css/skintools.min.css?v2.2.0">
    <script src="../assets/js/sections/skintools.min.js"></script>

    <!-- Plugins -->
    <link rel="stylesheet" href="../../global/vendor/animsition/animsition.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/vendor/asscrollable/asScrollable.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/vendor/switchery/switchery.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/vendor/intro-js/introjs.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/vendor/slidepanel/slidePanel.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/vendor/flag-icon-css/flag-icon.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/vendor/waves/waves.min.css?v2.2.0">

    <!-- Page -->
    <link rel="stylesheet" href="../assets/examples/css/uikit/colors.min.css?v2.2.0">

    <!-- Fonts -->
    <link rel="stylesheet" href="../../global/fonts/material-design/material-design.min.css?v2.2.0">
    <link rel="stylesheet" href="../../global/fonts/brand-icons/brand-icons.min.css?v2.2.0">

    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,700'>


    <!--[if lt IE 9]>
    <script src="../../global/vendor/html5shiv/html5shiv.min.js"></script>
    <![endif]-->

    <!--[if lt IE 10]>
    <script src="../../global/vendor/media-match/media.match.min.js"></script>
    <script src="../../global/vendor/respond/respond.min.js"></script>
    <![endif]-->

    <!-- Scripts -->
    <script src="../../global/vendor/modernizr/modernizr.min.js"></script>
    <script src="../../global/vendor/breakpoints/breakpoints.min.js"></script>
    <script>
        Breakpoints();
    </script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<nav class="site-navbar navbar navbar-inverse navbar-fixed-top navbar-mega" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle hamburger hamburger-close navbar-toggle-left hided"
                data-toggle="menubar">
            <span class="sr-only">Toggle navigation</span>
            <span class="hamburger-bar"></span>
        </button>
        <button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-collapse"
                data-toggle="collapse">
            <i class="icon md-more" aria-hidden="true"></i>
        </button>
        <div class="navbar-brand navbar-brand-center site-gridmenu-toggle" data-toggle="gridmenu">
            <img class="navbar-brand-logo" src="../assets/images/logo.png" title="Remark">
            <span class="navbar-brand-text hidden-xs"> Remark</span>
        </div>
        <button type="button" class="navbar-toggle collapsed" data-target="#site-navbar-search"
                data-toggle="collapse">
            <span class="sr-only">Toggle Search</span>
            <i class="icon md-search" aria-hidden="true"></i>
        </button>
    </div>

    <div class="navbar-container container-fluid">
        <!-- Navbar Collapse -->
        <div class="collapse navbar-collapse navbar-collapse-toolbar" id="site-navbar-collapse">
            <!-- Navbar Toolbar -->
            <ul class="nav navbar-toolbar">
                <li class="hidden-float" id="toggleMenubar">
                    <a data-toggle="menubar" href="#" role="button">
                        <i class="icon hamburger hamburger-arrow-left">
                            <span class="sr-only">Toggle menubar</span>
                            <span class="hamburger-bar"></span>
                        </i>
                    </a>
                </li>
                <li class="hidden-xs" id="toggleFullscreen">
                    <a class="icon icon-fullscreen" data-toggle="fullscreen" href="#" role="button">
                        <span class="sr-only">Toggle fullscreen</span>
                    </a>
                </li>
                <li class="hidden-float">
                    <a class="icon md-search" data-toggle="collapse" href="#" data-target="#site-navbar-search"
                       role="button">
                        <span class="sr-only">Toggle Search</span>
                    </a>
                </li>
                <li class="dropdown dropdown-fw dropdown-mega">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
                       data-animation="fade" role="button">Mega <i class="icon md-chevron-down" aria-hidden="true"></i></a>
                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation">
                            <div class="mega-content">
                                <div class="row">
                                    <div class="col-sm-4">
                                        <h5>UI Kit</h5>
                                        <ul class="blocks-2">
                                            <li class="mega-menu margin-0">
                                                <ul class="list-icons">
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="../advanced/animation.html">Animation</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="buttons.html">Buttons</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="colors.html">Colors</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="dropdowns.html">Dropdowns</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="icons.html">Icons</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="../advanced/lightbox.html">Lightbox</a>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li class="mega-menu margin-0">
                                                <ul class="list-icons">
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="modals.html">Modals</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="panel-structure.html">Panels</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="../structure/overlay.html">Overlay</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="tooltip-popover.html ">Tooltips</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="../advanced/scrollable.html">Scrollable</a>
                                                    </li>
                                                    <li><i class="md-chevron-right" aria-hidden="true"></i>
                                                        <a
                                                                href="typography.html">Typography</a>
                                                    </li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-sm-4">
                                        <h5>Media
                                            <span class="badge badge-success">4</span>
                                        </h5>
                                        <ul class="blocks-3">
                                            <li>
                                                <a class="thumbnail margin-0" href="javascript:void(0)">
                                                    <img class="width-full" src="../../global/photos/view-1-150x100.jpg" alt="..."
                                                            />
                                                </a>
                                            </li>
                                            <li>
                                                <a class="thumbnail margin-0" href="javascript:void(0)">
                                                    <img class="width-full" src="../../global/photos/view-2-150x100.jpg" alt="..."
                                                            />
                                                </a>
                                            </li>
                                            <li>
                                                <a class="thumbnail margin-0" href="javascript:void(0)">
                                                    <img class="width-full" src="../../global/photos/view-3-150x100.jpg" alt="..."
                                                            />
                                                </a>
                                            </li>
                                            <li>
                                                <a class="thumbnail margin-0" href="javascript:void(0)">
                                                    <img class="width-full" src="../../global/photos/view-4-150x100.jpg" alt="..."
                                                            />
                                                </a>
                                            </li>
                                            <li>
                                                <a class="thumbnail margin-0" href="javascript:void(0)">
                                                    <img class="width-full" src="../../global/photos/view-5-150x100.jpg" alt="..."
                                                            />
                                                </a>
                                            </li>
                                            <li>
                                                <a class="thumbnail margin-0" href="javascript:void(0)">
                                                    <img class="width-full" src="../../global/photos/view-6-150x100.jpg" alt="..."
                                                            />
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-sm-4">
                                        <h5 class="margin-bottom-0">Accordion</h5>
                                        <!-- Accordion -->
                                        <div class="panel-group panel-group-simple" id="siteMegaAccordion" aria-multiselectable="true"
                                             role="tablist">
                                            <div class="panel">
                                                <div class="panel-heading" id="siteMegaAccordionHeadingOne" role="tab">
                                                    <a class="panel-title" data-toggle="collapse" href="#siteMegaCollapseOne" data-parent="#siteMegaAccordion"
                                                       aria-expanded="false" aria-controls="siteMegaCollapseOne">
                                                        Collapsible Group Item #1
                                                    </a>
                                                </div>
                                                <div class="panel-collapse collapse" id="siteMegaCollapseOne" aria-labelledby="siteMegaAccordionHeadingOne"
                                                     role="tabpanel">
                                                    <div class="panel-body">
                                                        De moveat laudatur vestra parum doloribus labitur sentire partes, eripuit praesenti
                                                        congressus ostendit alienae, voluptati ornateque
                                                        accusamus clamat reperietur convicia albucius.
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="panel">
                                                <div class="panel-heading" id="siteMegaAccordionHeadingTwo" role="tab">
                                                    <a class="panel-title collapsed" data-toggle="collapse" href="#siteMegaCollapseTwo"
                                                       data-parent="#siteMegaAccordion" aria-expanded="false"
                                                       aria-controls="siteMegaCollapseTwo">
                                                        Collapsible Group Item #2
                                                    </a>
                                                </div>
                                                <div class="panel-collapse collapse" id="siteMegaCollapseTwo" aria-labelledby="siteMegaAccordionHeadingTwo"
                                                     role="tabpanel">
                                                    <div class="panel-body">
                                                        Praestabiliorem. Pellat excruciant legantur ullum leniter vacare foris voluptate
                                                        loco ignavi, credo videretur multoque choro fatemur
                                                        mortis animus adoptionem, bello statuat expediunt
                                                        naturales.
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="panel">
                                                <div class="panel-heading" id="siteMegaAccordionHeadingThree" role="tab">
                                                    <a class="panel-title collapsed" data-toggle="collapse" href="#siteMegaCollapseThree"
                                                       data-parent="#siteMegaAccordion" aria-expanded="false"
                                                       aria-controls="siteMegaCollapseThree">
                                                        Collapsible Group Item #3
                                                    </a>
                                                </div>
                                                <div class="panel-collapse collapse" id="siteMegaCollapseThree" aria-labelledby="siteMegaAccordionHeadingThree"
                                                     role="tabpanel">
                                                    <div class="panel-body">
                                                        Horum, antiquitate perciperet d conspectum locus obruamus animumque perspici probabis
                                                        suscipere. Desiderat magnum, contenta poena desiderant
                                                        concederetur menandri damna disputandum corporum.
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- End Accordion -->
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
            <!-- End Navbar Toolbar -->

            <!-- Navbar Toolbar Right -->
            <ul class="nav navbar-toolbar navbar-right navbar-toolbar-right">
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)" data-animation="scale-up"
                       aria-expanded="false" role="button">
                        <span class="flag-icon flag-icon-us"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem">
                                <span class="flag-icon flag-icon-gb"></span> English</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem">
                                <span class="flag-icon flag-icon-fr"></span> French</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem">
                                <span class="flag-icon flag-icon-cn"></span> Chinese</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem">
                                <span class="flag-icon flag-icon-de"></span> German</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem">
                                <span class="flag-icon flag-icon-nl"></span> Dutch</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a class="navbar-avatar dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"
                       data-animation="scale-up" role="button">
              <span class="avatar avatar-online">
                <img src="../../global/portraits/5.jpg" alt="...">
                <i></i>
              </span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem"><i class="icon md-account" aria-hidden="true"></i> Profile</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem"><i class="icon md-card" aria-hidden="true"></i> Billing</a>
                        </li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem"><i class="icon md-settings" aria-hidden="true"></i> Settings</a>
                        </li>
                        <li class="divider" role="presentation"></li>
                        <li role="presentation">
                            <a href="javascript:void(0)" role="menuitem"><i class="icon md-power" aria-hidden="true"></i> Logout</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a data-toggle="dropdown" href="javascript:void(0)" title="Notifications" aria-expanded="false"
                       data-animation="scale-up" role="button">
                        <i class="icon md-notifications" aria-hidden="true"></i>
                        <span class="badge badge-danger up">5</span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
                        <li class="dropdown-menu-header" role="presentation">
                            <h5>NOTIFICATIONS</h5>
                            <span class="label label-round label-danger">New 5</span>
                        </li>

                        <li class="list-group" role="presentation">
                            <div data-role="container">
                                <div data-role="content">
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                                                <i class="icon md-receipt bg-red-600 white icon-circle" aria-hidden="true"></i>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">A new order has been placed</h6>
                                                <time class="media-meta" datetime="2015-06-12T20:50:48+08:00">5 hours ago</time>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                                                <i class="icon md-account bg-green-600 white icon-circle" aria-hidden="true"></i>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Completed the task</h6>
                                                <time class="media-meta" datetime="2015-06-11T18:29:20+08:00">2 days ago</time>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                                                <i class="icon md-settings bg-red-600 white icon-circle" aria-hidden="true"></i>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Settings updated</h6>
                                                <time class="media-meta" datetime="2015-06-11T14:05:00+08:00">2 days ago</time>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                                                <i class="icon md-calendar bg-blue-600 white icon-circle" aria-hidden="true"></i>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Event started</h6>
                                                <time class="media-meta" datetime="2015-06-10T13:50:18+08:00">3 days ago</time>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                                                <i class="icon md-comment bg-orange-600 white icon-circle" aria-hidden="true"></i>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Message received</h6>
                                                <time class="media-meta" datetime="2015-06-10T12:34:48+08:00">3 days ago</time>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li class="dropdown-menu-footer" role="presentation">
                            <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                                <i class="icon md-settings" aria-hidden="true"></i>
                            </a>
                            <a href="javascript:void(0)" role="menuitem">
                                All notifications
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a data-toggle="dropdown" href="javascript:void(0)" title="Messages" aria-expanded="false"
                       data-animation="scale-up" role="button">
                        <i class="icon md-email" aria-hidden="true"></i>
                        <span class="badge badge-info up">3</span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
                        <li class="dropdown-menu-header" role="presentation">
                            <h5>MESSAGES</h5>
                            <span class="label label-round label-info">New 3</span>
                        </li>

                        <li class="list-group" role="presentation">
                            <div data-role="container">
                                <div data-role="content">
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-online">
                            <img src="../../global/portraits/2.jpg" alt="..." />
                            <i></i>
                          </span>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Mary Adams</h6>
                                                <div class="media-meta">
                                                    <time datetime="2015-06-17T20:22:05+08:00">30 minutes ago</time>
                                                </div>
                                                <div class="media-detail">Anyways, i would like just do it</div>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-off">
                            <img src="../../global/portraits/3.jpg" alt="..." />
                            <i></i>
                          </span>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Caleb Richards</h6>
                                                <div class="media-meta">
                                                    <time datetime="2015-06-17T12:30:30+08:00">12 hours ago</time>
                                                </div>
                                                <div class="media-detail">I checheck the document. But there seems</div>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-busy">
                            <img src="../../global/portraits/4.jpg" alt="..." />
                            <i></i>
                          </span>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">June Lane</h6>
                                                <div class="media-meta">
                                                    <time datetime="2015-06-16T18:38:40+08:00">2 days ago</time>
                                                </div>
                                                <div class="media-detail">Lorem ipsum Id consectetur et minim</div>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="list-group-item" href="javascript:void(0)" role="menuitem">
                                        <div class="media">
                                            <div class="media-left padding-right-10">
                          <span class="avatar avatar-sm avatar-away">
                            <img src="../../global/portraits/5.jpg" alt="..." />
                            <i></i>
                          </span>
                                            </div>
                                            <div class="media-body">
                                                <h6 class="media-heading">Edward Fletcher</h6>
                                                <div class="media-meta">
                                                    <time datetime="2015-06-15T20:34:48+08:00">3 days ago</time>
                                                </div>
                                                <div class="media-detail">Dolor et irure cupidatat commodo nostrud nostrud.</div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li class="dropdown-menu-footer" role="presentation">
                            <a class="dropdown-menu-footer-btn" href="javascript:void(0)" role="button">
                                <i class="icon md-settings" aria-hidden="true"></i>
                            </a>
                            <a href="javascript:void(0)" role="menuitem">
                                See all messages
                            </a>
                        </li>
                    </ul>
                </li>
                <li id="toggleChat">
                    <a data-toggle="site-sidebar" href="javascript:void(0)" title="Chat" data-url="../site-sidebar.tpl">
                        <i class="icon md-comment" aria-hidden="true"></i>
                    </a>
                </li>
            </ul>
            <!-- End Navbar Toolbar Right -->
        </div>
        <!-- End Navbar Collapse -->

        <!-- Site Navbar Seach -->
        <div class="collapse navbar-search-overlap" id="site-navbar-search">
            <form role="search">
                <div class="form-group">
                    <div class="input-search">
                        <i class="input-search-icon md-search" aria-hidden="true"></i>
                        <input type="text" class="form-control" name="site-search" placeholder="Search...">
                        <button type="button" class="input-search-close icon md-close" data-target="#site-navbar-search"
                                data-toggle="collapse" aria-label="Close"></button>
                    </div>
                </div>
            </form>
        </div>
        <!-- End Site Navbar Seach -->
    </div>
</nav>
<div class="site-menubar">
    <div class="site-menubar-body">
        <div>
            <div>
                <ul class="site-menu">
                    <li class="site-menu-category">General</li>
                    <li class="site-menu-item">
                        <a class="animsition-link" href="../index.html">
                            <i class="site-menu-icon md-view-dashboard" aria-hidden="true"></i>
                            <span class="site-menu-title">Dashboard</span>
                        </a>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-view-compact" aria-hidden="true"></i>
                            <span class="site-menu-title">Layouts</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/menu-collapsed.html">
                                    <span class="site-menu-title">Menu Collapsed</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/menu-expended.html">
                                    <span class="site-menu-title">Menu Expended</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/grids.html">
                                    <span class="site-menu-title">Grid Scaffolding</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/layout-grid.html">
                                    <span class="site-menu-title">Layout Grid</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/headers.html">
                                    <span class="site-menu-title">Different Headers</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/panel-transition.html">
                                    <span class="site-menu-title">Panel Transition</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/boxed.html">
                                    <span class="site-menu-title">Boxed Layout</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/two-columns.html">
                                    <span class="site-menu-title">Two Columns</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/bordered-header.html">
                                    <span class="site-menu-title">Bordered Header</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/menubar-flipped.html">
                                    <span class="site-menu-title">Menubar Flipped</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/menubar-native-scrolling.html">
                                    <span class="site-menu-title">Menubar Native Scrolling</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../layouts/page-aside-fixed.html">
                                    <span class="site-menu-title">Page Aside Fixed</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-google-pages" aria-hidden="true"></i>
                            <span class="site-menu-title">Pages</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item has-sub">
                                <a href="javascript:void(0)">
                                    <span class="site-menu-title">Errors</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/error-400.html">
                                            <span class="site-menu-title">400</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/error-403.html">
                                            <span class="site-menu-title">403</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/error-404.html">
                                            <span class="site-menu-title">404</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/error-500.html">
                                            <span class="site-menu-title">500</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/error-503.html">
                                            <span class="site-menu-title">503</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/faq.html">
                                    <span class="site-menu-title">FAQ</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/gallery.html">
                                    <span class="site-menu-title">Gallery</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/gallery-grid.html">
                                    <span class="site-menu-title">Gallery Grid</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/search-result.html">
                                    <span class="site-menu-title">Search Result</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:void(0)">
                                    <span class="site-menu-title">Maps</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/map-google.html">
                                            <span class="site-menu-title">Google Maps</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../pages/map-vector.html">
                                            <span class="site-menu-title">Vector Maps</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/maintenance.html">
                                    <span class="site-menu-title">Maintenance</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/forgot-password.html">
                                    <span class="site-menu-title">Forgot Password</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/lockscreen.html">
                                    <span class="site-menu-title">Lockscreen</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/login.html">
                                    <span class="site-menu-title">Login</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/register.html">
                                    <span class="site-menu-title">Register</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/login-v2.html">
                                    <span class="site-menu-title">Login V2</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/register-v2.html">
                                    <span class="site-menu-title">Register V2</span>
                                    <div class="site-menu-label">
                                        <span class="label label-info label-round">new</span>
                                    </div>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/login-v3.html">
                                    <span class="site-menu-title">Login V3</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/register-v3.html">
                                    <span class="site-menu-title">Register V3</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/user.html">
                                    <span class="site-menu-title">User List</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/invoice.html">
                                    <span class="site-menu-title">Invoice</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/blank.html">
                                    <span class="site-menu-title">Blank Page</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/email.html">
                                    <span class="site-menu-title">Email</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/code-editor.html">
                                    <span class="site-menu-title">Code Editor</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/profile.html">
                                    <span class="site-menu-title">Profile</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../pages/site-map.html">
                                    <span class="site-menu-title">Sitemap</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-category">Elements</li>
                    <li class="site-menu-item has-sub active open">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-palette" aria-hidden="true"></i>
                            <span class="site-menu-title">Basic UI</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item has-sub">
                                <a href="javascript:void(0)">
                                    <span class="site-menu-title">Panel</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="panel-structure.html">
                                            <span class="site-menu-title">Panel Structure</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="panel-actions.html">
                                            <span class="site-menu-title">Panel Actions</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="panel-portlets.html">
                                            <span class="site-menu-title">Panel Portlets</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="buttons.html">
                                    <span class="site-menu-title">Buttons</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="dropdowns.html">
                                    <span class="site-menu-title">Dropdowns</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="icons.html">
                                    <span class="site-menu-title">Icons</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="list.html">
                                    <span class="site-menu-title">List</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="tooltip-popover.html">
                                    <span class="site-menu-title">Tooltip &amp; Popover</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="modals.html">
                                    <span class="site-menu-title">Modals</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="tabs-accordions.html">
                                    <span class="site-menu-title">Tabs &amp; Accordions</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="images.html">
                                    <span class="site-menu-title">Images</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="badges-labels.html">
                                    <span class="site-menu-title">Badges &amp; Labels</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="progress-bars.html">
                                    <span class="site-menu-title">Progress Bars</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="carousel.html">
                                    <span class="site-menu-title">Carousel</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="typography.html">
                                    <span class="site-menu-title">Typography</span>
                                </a>
                            </li>
                            <li class="site-menu-item active">
                                <a class="animsition-link" href="colors.html">
                                    <span class="site-menu-title">Colors</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="utilities.html">
                                    <span class="site-menu-title">Utilties</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-format-color-fill" aria-hidden="true"></i>
                            <span class="site-menu-title">Advanced UI</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item hidden-xs site-tour-trigger">
                                <a href="javascript:void(0)">
                                    <span class="site-menu-title">Tour</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/animation.html">
                                    <span class="site-menu-title">Animation</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/highlight.html">
                                    <span class="site-menu-title">Highlight</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/lightbox.html">
                                    <span class="site-menu-title">Lightbox</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/scrollable.html">
                                    <span class="site-menu-title">Scrollable</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/rating.html">
                                    <span class="site-menu-title">Rating</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/context-menu.html">
                                    <span class="site-menu-title">Context Menu</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/alertify.html">
                                    <span class="site-menu-title">Alertify</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/masonry.html">
                                    <span class="site-menu-title">Masonry</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/treeview.html">
                                    <span class="site-menu-title">Treeview</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/toastr.html">
                                    <span class="site-menu-title">Toastr</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/maps-vector.html">
                                    <span class="site-menu-title">Vector Maps</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/maps-google.html">
                                    <span class="site-menu-title">Google Maps</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/sortable-nestable.html">
                                    <span class="site-menu-title">Sortable &amp; Nestable</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../advanced/bootbox-sweetalert.html">
                                    <span class="site-menu-title">Bootbox &amp; Sweetalert</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-puzzle-piece" aria-hidden="true"></i>
                            <span class="site-menu-title">Structure</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/alerts.html">
                                    <span class="site-menu-title">Alerts</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/ribbon.html">
                                    <span class="site-menu-title">Ribbon</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/pricing-tables.html">
                                    <span class="site-menu-title">Pricing Tables</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/overlay.html">
                                    <span class="site-menu-title">Overlay</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/cover.html">
                                    <span class="site-menu-title">Cover</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/timeline-simple.html">
                                    <span class="site-menu-title">Simple Timeline</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/timeline.html">
                                    <span class="site-menu-title">Timeline</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/step.html">
                                    <span class="site-menu-title">Step</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/comments.html">
                                    <span class="site-menu-title">Comments</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/media.html">
                                    <span class="site-menu-title">Media</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/chat.html">
                                    <span class="site-menu-title">Chat</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/testimonials.html">
                                    <span class="site-menu-title">Testimonials</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/nav.html">
                                    <span class="site-menu-title">Nav</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/navbars.html">
                                    <span class="site-menu-title">Navbars</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/blockquotes.html">
                                    <span class="site-menu-title">Blockquotes</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/pagination.html">
                                    <span class="site-menu-title">Pagination</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../structure/breadcrumbs.html">
                                    <span class="site-menu-title">Breadcrumbs</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-widgets" aria-hidden="true"></i>
                            <span class="site-menu-title">Widgets</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../widgets/statistics.html">
                                    <span class="site-menu-title">Statistics Widgets</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../widgets/data.html">
                                    <span class="site-menu-title">Data Widgets</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../widgets/blog.html">
                                    <span class="site-menu-title">Blog Widgets</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../widgets/chart.html">
                                    <span class="site-menu-title">Chart Widgets</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../widgets/social.html">
                                    <span class="site-menu-title">Social Widgets</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../widgets/weather.html">
                                    <span class="site-menu-title">Weather Widgets</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-comment-alt-text" aria-hidden="true"></i>
                            <span class="site-menu-title">Forms</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/general.html">
                                    <span class="site-menu-title">General Elements</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/material.html">
                                    <span class="site-menu-title">Material Elements</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/advanced.html">
                                    <span class="site-menu-title">Advanced Elements</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/layouts.html">
                                    <span class="site-menu-title">Form Layouts</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/wizard.html">
                                    <span class="site-menu-title">Form Wizard</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/validation.html">
                                    <span class="site-menu-title">Form Validation</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/masks.html">
                                    <span class="site-menu-title">Form Masks</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/editable.html">
                                    <span class="site-menu-title">Form Editable</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:void(0)">
                                    <span class="site-menu-title">Editors</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../forms/editor-summernote.html">
                                            <span class="site-menu-title">Summernote</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../forms/editor-markdown.html">
                                            <span class="site-menu-title">Markdown</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../forms/editor-ace.html">
                                            <span class="site-menu-title">Ace Editor</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/image-cropping.html">
                                    <span class="site-menu-title">Image Cropping</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../forms/file-uploads.html">
                                    <span class="site-menu-title">File Uploads</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-border-all" aria-hidden="true"></i>
                            <span class="site-menu-title">Tables</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/basic.html">
                                    <span class="site-menu-title">Basic Tables</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/bootstrap.html">
                                    <span class="site-menu-title">Bootstrap Tables</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/floatthead.html">
                                    <span class="site-menu-title">floatThead</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/responsive.html">
                                    <span class="site-menu-title">Responsive Tables</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/editable.html">
                                    <span class="site-menu-title">Editable Tables</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/jsgrid.html">
                                    <span class="site-menu-title">jsGrid</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/footable.html">
                                    <span class="site-menu-title">FooTable</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../tables/datatable.html">
                                    <span class="site-menu-title">DataTables</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-chart" aria-hidden="true"></i>
                            <span class="site-menu-title">Chart</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/chartjs.html">
                                    <span class="site-menu-title">Chart.js</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/gauges.html">
                                    <span class="site-menu-title">Gauges</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/flot.html">
                                    <span class="site-menu-title">Flot</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/peity.html">
                                    <span class="site-menu-title">Peity</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/sparkline.html">
                                    <span class="site-menu-title">Sparkline</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/morris.html">
                                    <span class="site-menu-title">Morris</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/chartist.html">
                                    <span class="site-menu-title">Chartist.js</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/rickshaw.html">
                                    <span class="site-menu-title">Rickshaw</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/pie-progress.html">
                                    <span class="site-menu-title">Pie Progress</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../charts/c3.html">
                                    <span class="site-menu-title">C3</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-category">Apps</li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:void(0)">
                            <i class="site-menu-icon md-apps" aria-hidden="true"></i>
                            <span class="site-menu-title">Apps</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/contacts/contacts.html">
                                    <span class="site-menu-title">Contacts</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/calendar/calendar.html">
                                    <span class="site-menu-title">Calendar</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/notebook/notebook.html">
                                    <span class="site-menu-title">Notebook</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/taskboard/taskboard.html">
                                    <span class="site-menu-title">Taskboard</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:void(0)">
                                    <span class="site-menu-title">Documents</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../apps/documents/articles.html">
                                            <span class="site-menu-title">Articles</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../apps/documents/categories.html">
                                            <span class="site-menu-title">Categories</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a class="animsition-link" href="../apps/documents/article.html">
                                            <span class="site-menu-title">Article</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/forum/forum.html">
                                    <span class="site-menu-title">Forum</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/message/message.html">
                                    <span class="site-menu-title">Message</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/projects/projects.html">
                                    <span class="site-menu-title">Projects</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/mailbox/mailbox.html">
                                    <span class="site-menu-title">Mailbox</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/media/overview.html">
                                    <span class="site-menu-title">Media</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/work/work.html">
                                    <span class="site-menu-title">Work</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a class="animsition-link" href="../apps/location/location.html">
                                    <span class="site-menu-title">Location</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-category">Angular UI</li>
                    <li class="site-menu-item">
                        <a class="animsition-link" href="../angular/index.html">
                            <i class="site-menu-icon bd-angular" aria-hidden="true"></i>
                            <span class="site-menu-title">Angular UI</span>
                            <div class="site-menu-label">
                                <span class="label label-danger label-round">new</span>
                            </div>
                        </a>
                    </li>
                </ul>

                <div class="site-menubar-section">
                    <h5>
                        Milestone
                        <span class="pull-right">30%</span>
                    </h5>
                    <div class="progress progress-xs">
                        <div class="progress-bar active" style="width: 30%;" role="progressbar"></div>
                    </div>
                    <h5>
                        Release
                        <span class="pull-right">60%</span>
                    </h5>
                    <div class="progress progress-xs">
                        <div class="progress-bar progress-bar-warning" style="width: 60%;" role="progressbar"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="site-menubar-footer">
        <a href="javascript: void(0);" class="fold-show" data-placement="top" data-toggle="tooltip"
           data-original-title="Settings">
            <span class="icon md-settings" aria-hidden="true"></span>
        </a>
        <a href="javascript: void(0);" data-placement="top" data-toggle="tooltip" data-original-title="Lock">
            <span class="icon md-eye-off" aria-hidden="true"></span>
        </a>
        <a href="javascript: void(0);" data-placement="top" data-toggle="tooltip" data-original-title="Logout">
            <span class="icon md-power" aria-hidden="true"></span>
        </a>
    </div>
</div>
<div class="site-gridmenu">
    <div>
        <div>
            <ul>
                <li>
                    <a href="../apps/mailbox/mailbox.html">
                        <i class="icon md-email"></i>
                        <span>Mailbox</span>
                    </a>
                </li>
                <li>
                    <a href="../apps/calendar/calendar.html">
                        <i class="icon md-calendar"></i>
                        <span>Calendar</span>
                    </a>
                </li>
                <li>
                    <a href="../apps/contacts/contacts.html">
                        <i class="icon md-account"></i>
                        <span>Contacts</span>
                    </a>
                </li>
                <li>
                    <a href="../apps/media/overview.html">
                        <i class="icon md-videocam"></i>
                        <span>Media</span>
                    </a>
                </li>
                <li>
                    <a href="../apps/documents/categories.html">
                        <i class="icon md-receipt"></i>
                        <span>Documents</span>
                    </a>
                </li>
                <li>
                    <a href="../apps/projects/projects.html">
                        <i class="icon md-image"></i>
                        <span>Project</span>
                    </a>
                </li>
                <li>
                    <a href="../apps/forum/forum.html">
                        <i class="icon md-comments"></i>
                        <span>Forum</span>
                    </a>
                </li>
                <li>
                    <a href="../index.html">
                        <i class="icon md-view-dashboard"></i>
                        <span>Dashboard</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>


<!-- Page -->
<div class="page animsition">
    <div class="page-header">
        <ol class="breadcrumb">
            <li><a href="../index.html">Home</a></li>
            <li class="active">Basic UI</li>
        </ol>
        <h1 class="page-title">Colors</h1>
        <div class="page-header-actions">
            <button type="button" class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip"
                    data-original-title="Edit">
                <i class="icon md-edit" aria-hidden="true"></i>
            </button>
            <button type="button" class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip"
                    data-original-title="Refresh">
                <i class="icon md-refresh-alt" aria-hidden="true"></i>
            </button>
            <button type="button" class="btn btn-sm btn-icon btn-primary btn-round" data-toggle="tooltip"
                    data-original-title="Setting">
                <i class="icon md-settings" aria-hidden="true"></i>
            </button>
        </div>
    </div>
    <div class="page-content">
        <!-- Panel -->
        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">Style</h3>
            </div>
            <div class="panel-body container-fluid">

                <!-- Example Base Color Palette -->
                <div class="example-wrap">
                    <h4 class="example-title">Base Color Palette</h4>
                    <p>The dashboard will synergize with the colour selection made by the
                        user and appropriately amend. Similarly, all other elements will
                        sync according to the base colours.
                    </p>
                    <div class="example color-primaries">
                        <div class="bg-grey-200 grey-600">#eeeeee</div>
                        <div class="bg-grey-500">#9e9e9e</div>
                        <div class="bg-indigo-500">#3f51b5</div>
                        <div class="bg-cyan-500">#00bcd4</div>
                        <div class="bg-green-500">#4caf50</div>
                        <div class="bg-orange-500">#ff9800</div>
                        <div class="bg-red-500">#f44336</div>
                        <div class="bg-purple-500">#9c27b0</div>
                    </div>
                </div>
                <!-- End Example Base Color Palette -->


                <!-- Example Color Palette -->
                <div class="example-wrap">
                    <h4 class="example-title">Color Palette</h4>
                    <p>This color palette comprises primary and accent colors that can be
                        used for illustration or to develop your brand colors.
                        <br/> They've been designed to work harmoniously with each other.</p>
                    <p class="margin-bottom-30">The color palette starts with primary colors and fills in the spectrum
                        to create a complete and usable palette for web
                        <br/> project. We suggests using the 500 colors as the primary colors
                        in your project and the other colors as accents colors.</p>
                    <div class="row row-lg color-palette">
                        <div class="col-sm-4 col-md-3">
                            <h5 class="text-uppercase">red</h5>
                            <ul class="list-group">
                                <li class="bg-red-a400 grey-800 list-group-item">
                                    <span>a400</span> /
                                    <span>#d50000</span>
                                </li>
                                <li class="bg-red-a300 grey-800 list-group-item">
                                    <span>a300</span> /
                                    <span>#ff1744</span>
                                </li>
                                <li class="bg-red-a200 grey-800 list-group-item">
                                    <span>a200</span> /
                                    <span>#ff5252</span>
                                </li>
                                <li class="bg-red-a100 grey-800 list-group-item">
                                    <span>a100</span> /
                                    <span>#ff8a80</span>
                                </li>

                                <li class="bg-red-900 list-group-item">
                                    <span>900</span> /
                                    <span>#b71c1c</span>
                                </li>

                                <li class="bg-red-800 list-group-item">
                                    <span>800</span> /
                                    <span>#c62828</span>
                                </li>

                                <li class="bg-red-700 list-group-item">
                                    <span>700</span> /
                                    <span>#d32f2f</span>
                                </li>

                                <li class="bg-red-600 list-group-item">
                                    <span>600</span> /
                                    <span>#e53935</span>
                                </li>

                                <li class="bg-red-500 list-group-item">
                                    <span>500</span> /
                                    <span>#f44336</span>
                                </li>

                                <li class="bg-red-400 grey-800 list-group-item">
                                    <span>400</span> /
                                    <span>#ef5350</span>
                                </li>

                                <li class="bg-red-300 grey-800 list-group-item">
                                    <span>300</span> /
                                    <span>#e57373</span>
                                </li>

                                <li class="bg-red-200 grey-800 list-group-item">
                                    <span>200</span> /
                                    <span>#ef9a9a</span>
                                </li>

                                <li class="bg-red-100 grey-800 list-group-item">
                                    <span>100</span> /
                                    <span>#ffcdd2</span>
                                </li>

                                <li class="bg-red-50 grey-800 list-group-item">
                                    <span>50</span> /
                                    <span>#ffebee</span>
                                </li>
                            </ul>
                        </div>
                        <div class="col-sm-4 col-md-3">
                            <h5 class="text-uppercase">pink</h5>
                            <ul class="list-group">
                                <li class="bg-pink-a400 grey-800 list-group-item">
                                    <span>a400</span> /
                                    <span>#c51162</span>
                                </li>
                                <li class="bg-pink-a300 grey-800 list-group-item">
                                    <span>a300</span> /
                                    <span>#f50057</span>
                                </li>
                                <li class="bg-pink-a200 grey-800 list-group-item">
                                    <span>a200</span> /
                                    <span>#ff4081</span>
                                </li>
                                <li class="bg-pink-a100 grey-800 list-group-item">
                                    <span>a100</span> /
                                    <span>#ff80ab</span>
                                </li>

                                <li class="bg-pink-900 list-group-item">
                                    <span>900</span> /
                                    <span>#880e4f</span>
                                </li>

                                <li class="bg-pink-800 list-group-item">
                                    <span>800</span> /
                                    <span>#ad1457</span>
                                </li>

                                <li class="bg-pink-700 list-group-item">
                                    <span>700</span> /
                                    <span>#c2185b</span>
                                </li>

                                <li class="bg-pink-600 list-group-item">
                                    <span>600</span> /
                                    <span>#d81b60</span>
                                </li>

                                <li class="bg-pink-500 list-group-item">
                                    <span>500</span> /
                                    <span>#e91e63</span>
                                </li>

                                <li class="bg-pink-400 grey-800 list-group-item">
                                    <span>400</span> /
                                    <span>#ec407a</span>
                                </li>

                                <li class="bg-pink-300 grey-800 list-group-item">
                                    <span>300</span> /
                                    <span>#f06292</span>
                                </li>

                                <li class="bg-pink-200 grey-800 list-group-item">
                                    <span>200</span> /
                                    <span>#f48fb1</span>
                                </li>

                                <li class="bg-pink-100 grey-800 list-group-item">
                                    <span>100</span> /
                                    <span>#f8bbd0</span>
                                </li>

                                <li class="bg-pink-50 grey-800 list-group-item">
                                    <span>50</span> /
                                    <span>#fce4ec</span>
                                </li>
                            </ul>
                        </div>
                        <div class="col-sm-4 col-md-3">
                            <h5 class="text-uppercase">purple</h5>
                            <ul class="list-group">
                                <li class="bg-purple-a400 grey-800 list-group-item">
                                    <span>a400</span> /
                                    <span>#aa00ff</span>
                                </li>
                                <li class="bg-purple-a300 grey-800 list-group-item">
                                    <span>a300</span> /
                                    <span>#d500f9</span>
                                </li>
                                <li class="bg-purple-a200 grey-800 list-group-item">
                                    <span>a200</span> /
                                    <span>#e040fb</span>
                                </li>
                                <li class="bg-purple-a100 grey-800 list-group-item">
                                    <span>a100</span> /
                                    <span>#ea80fc</span>
                                </li>

                                <li class="bg-purple-900 list-group-item">
                                    <span>900</span> /
                                    <span>#4a148c</span>
                                </li>

                                <li class="bg-purple-800 list-group-item">
                                    <span>800</span> /
                                    <span>#6a1b9a</span>
                                </li>

                                <li class="bg-purple-700 list-group-item">
                                    <span>700</span> /
                                    <span>#7b1fa2</span>
                                </li>

                                <li class="bg-purple-600 list-group-item">
                                    <span>600</span> /
                                    <span>#8e24aa</span>
                                </li>

                                <li class="bg-purple-500 list-group-item">
                                    <span>500</span> /
                                    <span>#9c27b0</span>
                                </li>

                                <li class="bg-purple-400 grey-800 list-group-item">
                                    <span>400</span> /
                                    <span>#ab47bc</span>
                                </li>

                                <li class="bg-purple-300 grey-800 list-group-item">
                                    <span>300</span> /
                                    <span>#ba68c8</span>
                                </li>

                                <li class="bg-purple-200 grey-800 list-group-item">
                                    <span>200</span> /
                                    <span>#ce93d8</span>
                                </li>

                                <li class="bg-purple-100 grey-800 list-group-item">
                                    <span>100</span> /
                                    <span>#e1bee7</span>
                                </li>

                                <li class="bg-purple-50 grey-800 list-group-item">
                                    <span>50</span> /
                                    <span>#f3e5f5</span>
                                </li>
                            </ul>
                        </div>
                        <div class="col-sm-4 col-md-3">
                            <h5 class="text-uppercase">deep-purple</h5>
                            <ul class="list-group">
                                <li class="bg-deep-purple-a400 grey-800 list-group-item">
                                    <span>a400</span> /
                                    <span>#6200ea</span>
                                </li>
                                <li class="bg-deep-purple-a300 grey-800 list-group-item">
                                    <span>a300</span> /
                                    <span>#651fff</span>
                                </li>
                                <li class="bg-deep-purple-a200 grey-800 list-group-item">
                                    <span>a200</span> /
                                    <span>#7c4dff</span>
                                </li>
                                <li class="bg-deep-purple-a100 grey-800 list-group-item">
                                    <span>a100</span> /
                                    <span>#b388ff</span>
                                </li>

                                <li class="bg-deep-purple-900 list-group-item">
                                    <span>900</span> /
                                    <span>#311b92</span>
                                </li>

                                <li class="bg-deep-purple-800 list-group-item">
                                    <span>800</span> /
                                    <span>#4527a0</span>
                                </li>

                                <li class="bg-deep-purple-700 list-group-item">
                                    <span>700</span> /
                                    <span>#512da8</span>
                                </li>

                                <li class="bg-deep-purple-600 list-group-item">
                                    <span>600</span> /
                                    <span>#5e35b1</span>
                                </li>

                                <li class="bg-deep-purple-500 list-group-item">
                                    <span>500</span> /
                                    <span>#673ab7</span>
                                </li>

                                <li class="bg-deep-purple-400 grey-800 list-group-item">
                                    <span>400</span> /
                                    <span>#7e57c2</span>
                                </li>

                                <li class="bg-deep-purple-300 grey-800 list-group-item">
                                    <span>300</span> /
                                    <span>#9575cd</span>
                                </li>

                                <li class="bg-deep-purple-200 grey-800 list-group-item">
                                    <span>200</span> /
                                    <span>#b39ddb</span>
                                </li>

                                <li class="bg-deep-purple-100 grey-800 list-group-item">
                                    <span>100</span> /
                                    <span>#d1c4e9</span>
                                </li>

                                <li class="bg-deep-purple-50 grey-800 list-group-item">
                                    <span>50</span> /
                                    <span>#ede7f6</span>
                                </li>
                            </ul>
                        </div>
                        <div class="col-sm-4 col-md-3">
                            <h5 class="text-uppercase">indigo</h5>
                            <ul class="list-group">
                                <li class="bg-indigo-a400 grey-800 list-group-item">
                                    <span>a400</span> /
                                    <span>#304ffe</span>
                                </li>
                                <li class="bg-indigo-a300 grey-800 list-group-item">
                                    <span>a300</span> /
                                    <span>#3d5afe</span>
                                </li>
                                <li class="bg-indigo-a200 grey-800 list-group-item">
                                    <span>a200</span> /
                                    <span>#536dfe</span>
                                </li>
                                <li class="bg-indigo-a100 grey-800 list-group-item">
                                    <span>a100</span> /
                                    <span>#8c9eff</span>
                                </li>

                                <li class="bg-indigo-900 list-group-item">
                                    <span>900</span> /
                                    <span>#1a237e</span>
                                </li>

                                <li class="bg-indigo-800 list-group-item">
                                    <span>800</span> /
                                    <span>#283593</span>
                                </li>

                                <li class="bg-indigo-700 list-group-item">
                                    <span>700</span> /
                                    <span>#303f9f</span>
                                </li>

                                <li class="bg-indigo-600 list-group-item">
                                    <span>600</span> /
                                    <span>#3949ab</span>
                                </li>

                                <li class="bg-indigo-500 list-group-item">
                                    <span>500</span> /
                                    <span>#3f51b5</span>
                                </li>

                                <li class="bg-indigo-400 grey-800 list-group-item">
                                    <span>400</span> /
                                    <span>#5c6bc0</span>
                                </li>

                                <li class="bg-indigo-300 grey-800 list-group-item">
                                    <span>300</span> /
                                    <span>#7986cb</span>
                                </li>

                                <li class="bg-indigo-200 grey-800 list-group-item">
                                    <span>200</span> /
                                    <span>#9fa8da</span>
                                </li>

                                <li class="bg-indigo-100 grey-800 list-group-item">
                                    <span>100</span> /
                                    <span>#c5cae9</span>
                                </li>

                                <li class="bg-indigo-50 grey-800 list-group-item">
                                    <span>50</span> /
                                    <span>#e8eaf6</span>
                                </li>
                            </ul>
                        </div>
                        <div class="col-sm-4 col-md-3">
                            <h5 class="text-uppercase">blue</h5>
                            <ul class="list-group">
                                <li class="bg-blue-a400 grey-800 list-group-item">
                                    <span>a400</span> /
                                    <span>#2962ff</span>
                                </li>
                                <li class="bg-blue-a300 grey-800 list-group-item">
                                    <span>a300</span> /
                                    <span>#2979ff</span>
                                </li>
                                <li class="bg-blue-a200 grey-800 list-group-item">
                                    <span>a200</span> /
                                    <span>#448aff</span>
                                </li>
                                <li class="bg-blue-a100 grey-800 list-group-item">
                                    <span>a100</span> /
                                    <span>#82b1ff</span>
                                </li>

                                <li class="bg-blue-900 list-group-item">
                                    <span>900</span> /
                                    <span>#0d47a1</span>
                                </li>

                                <li class="bg-blue-800 list-group-item">
                                    <span>800</span> /
                                    <span>#1565c0</span>
                                </li>

                                <li class="bg-blue-700 list-group-item">
                                    <span>700</span> /
                                    <span>#1976d2</span>
                                </li>

                                <li class="bg-blue-600 list-group-item">
                                    <span>600</span> /
                                    <span>#1e88e5</span>
                                </li>

                                <li class="bg-blue-500 list-group-item">
                                    <span>500</span> /
                                    <span>#2196f3</span>
                                </li>

                                <li class="bg-blue-400 grey-800 list-group-item">
                                    <span>400</span> /
                                    <span>#42a5f5</span>
                                </li>

                                <li class="bg-blue-300 grey-800 list-group-item">
                                    <span>300</span> /
                                    <span>#64b5f6</span>
                                </li>

                                <li class="bg-blue-200 grey-800 list-group-item">
                                    <span>200</span> /
                                    <span>#90caf9</span>
                                </li>

                                <li class="bg-blue-100 grey-800 list-group-item">
                                    <span>100</span> /
                                    <span>#bbdefb</span>
                                </li>

                                <li class="bg-blue-50 grey-800 list-group-item">
                                    <span>50</span> /
                                    <span>#e3f2fd</span>
                                </li>
                            </ul>
                        </div>
                        <div class="col-sm-4 col-md-3">
                            <h5 class="text-uppercase">light-blue</h5>
                            <ul class="list-group">
                                <li class="bg-light-blue-a400 grey-800 list-group-item">
                                    <span>a400</span> /
                                    <span>#0091ea</span>
                                </li>
                                <li class="bg-light-blue-a300 grey-800 list-group-item">
                                    <span>a300</span> /
                                    <span>#00b0ff</span>
                                </li>
                                <li class="bg-light-blue-a200 grey-800 list-group-item">
                                    <span>a200</span> /
                                    <span>#40c4ff</span>
                                </li>
                                <li class="bg-light-blue-a100 grey-800 list-group-item">
                                    <span>a100</span> /
                                    <span>#80d8ff</span>
                                </li>

                                <li class="bg-light-blue-900 list-group-item">
                                    <span>900</span> /
                                    <span>#01579b</span>
                                </li>

                                <li class="bg-light-blue-800 list-group-item">
                                    <span>800</span> /
                                    <span>#0277bd</span>
                                </li>

                                <li class="bg-light-blue-700 list-group-item">
                                    <span>700</span> /
                                    <span>#0288d1</span>
                                </li>

                                <li class="bg-light-blue-600 list-group-item">
                                    <span>600</span> /
                                    <span>#039be5</span>
                                </li>

                                <li class="bg-light-blue-500 list-group-item">
                                    <span>500</span> /
                                    <span>#03a9f4</span>
                                </li>

                                <li class="bg-light-blue-400 grey-800 list-group-item">
                                    <span>400</span> /
                                    <span>#29b6f6</span>
                                </li>

                                <li class="bg-light-blue-300 grey-800 list-group-item">
                                    <span>300</span> /
                                    <span>#4fc3f7</span>
                                </li>

                                <li class="bg-light-blue-200 grey-800 list-group-item">
                                    <span>200</span> /
                                    <span>#81d4fa</span>
                                </li>

                                <li class="bg-light-blue-100 grey-800 list-group-item">
                                    <span>100</span> /
                                    <span>#b3e5fc</span>
                                </li>

                                <li class="bg-light-blue-50 grey-800 list-group-item">
                                    <span>50</span> /
                                    <span>#e1f5fe</span>
                                </li>
                            </ul>
                        </div>
                        <div class="col-sm-4 col-md-3">
                            <h5 class="text-uppercase">cyan</h5>
                            <ul class="list-group">
                                <li class="bg-cyan-a400 grey-800 list-group-item">
                                    <span>a400</span> /
                                    <span>#00b8d4</span>
                                </li>
                                <li class="bg-cyan-a300 grey-800 list-group-item">
                                    <span>a300</span> /
                                    <span>#00e5ff</span>
                                </li>
                                <li class="bg-cyan-a200 grey-800 list-group-item">
                                    <span>a200</span> /
                                    <span>#18ffff</span>
                                </li>
                                <li class="bg-cyan-a100 grey-800 list-group-item">
                                    <span>a100</span> /
                                    <span>#84ffff</span>
                                </li>

                                <li class="bg-cyan-900 list-group-item">
                                    <span>900</span> /
                                    <span>#006064</span>
                                </li>

                                <li class="bg-cyan-800 list-group-item">
                                    <span>800</span> /
                                    <span>#00838f</span>
                                </li>

                                <li class="bg-cyan-700 list-group-item">
                                    <span>700</span> /
                                    <span>#0097a7</span>
                                </li>

                                <li class="bg-cyan-600 list-group-item">
                                    <span>600</span> /
                                    <span>#00acc1</span>
                                </li>

                                <li class="bg-cyan-500 list-group-item">
                                    <span>500</span> /
                                    <span>#00bcd4</span>
                                </li>

                                <li class="bg-cyan-400 grey-800 list-group-item">
                                    <span>400</span> /
                                    <span>#26c6da</span>
                                </li>

                                <li class="bg-cyan-300 grey-800 list-group-item">
                                    <span>300</span> /
                                    <span>#4dd0e1</span>
                                </li>

                                <li class="bg-cyan-200 grey-800 list-group-item">
                                    <span>200</span> /
                                    <span>#80deea</span>
                                </li>

                                <li class="bg-cyan-100 grey-800 list-group-item">
                                    <span>100</span> /
                                    <span>#b2ebf2</span>
                                </li>

                                <li class="bg-cyan-50 grey-800 list-group-item">
                                    <span>50</span> /
                                    <span>#e0f7fa</span>
                                </li>
                            </ul>
                        </div>
                        <div class="col-sm-4 col-md-3">
                            <h5 class="text-uppercase">teal</h5>
                            <ul class="list-group">
                                <li class="bg-teal-a400 grey-800 list-group-item">
                                    <span>a400</span> /
                                    <span>#00bfa5</span>
                                </li>
                                <li class="bg-teal-a300 grey-800 list-group-item">
                                    <span>a300</span> /
                                    <span>#1de9b6</span>
                                </li>
                                <li class="bg-teal-a200 grey-800 list-group-item">
                                    <span>a200</span> /
                                    <span>#64ffda</span>
                                </li>
                                <li class="bg-teal-a100 grey-800 list-group-item">
                                    <span>a100</span> /
                                    <span>#a7ffeb</span>
                                </li>

                                <li class="bg-teal-900 list-group-item">
                                    <span>900</span> /
                                    <span>#004d40</span>
                                </li>

                                <li class="bg-teal-800 list-group-item">
                                    <span>800</span> /
                                    <span>#00695c</span>
                                </li>

                                <li class="bg-teal-700 list-group-item">
                                    <span>700</span> /
                                    <span>#00796b</span>
                                </li>

                                <li class="bg-teal-600 list-group-item">
                                    <span>600</span> /
                                    <span>#00897b</span>
                                </li>

                                <li class="bg-teal-500 list-group-item">
                                    <span>500</span> /
                                    <span>#009688</span>
                                </li>

                                <li class="bg-teal-400 grey-800 list-group-item">
                                    <span>400</span> /
                                    <span>#26a69a</span>
                                </li>

                                <li class="bg-teal-300 grey-800 list-group-item">
                                    <span>300</span> /
                                    <span>#4db6ac</span>
                                </li>

                                <li class="bg-teal-200 grey-800 list-group-item">
                                    <span>200</span> /
                                    <span>#80cbc4</span>
                                </li>

                                <li class="bg-teal-100 grey-800 list-group-item">
                                    <span>100</span> /
                                    <span>#b2dfdb</span>
                                </li>

                                <li class="bg-teal-50 grey-800 list-group-item">
                                    <span>50</span> /
                                    <span>#e0f2f1</span>
                                </li>
                            </ul>
                        </div>
                        <div class="col-sm-4 col-md-3">
                            <h5 class="text-uppercase">green</h5>
                            <ul class="list-group">
                                <li class="bg-green-a400 grey-800 list-group-item">
                                    <span>a400</span> /
                                    <span>#00c853</span>
                                </li>
                                <li class="bg-green-a300 grey-800 list-group-item">
                                    <span>a300</span> /
                                    <span>#00e676</span>
                                </li>
                                <li class="bg-green-a200 grey-800 list-group-item">
                                    <span>a200</span> /
                                    <span>#69f0ae</span>
                                </li>
                                <li class="bg-green-a100 grey-800 list-group-item">
                                    <span>a100</span> /
                                    <span>#b9f6ca</span>
                                </li>

                                <li class="bg-green-900 list-group-item">
                                    <span>900</span> /
                                    <span>#1b5e20</span>
                                </li>

                                <li class="bg-green-800 list-group-item">
                                    <span>800</span> /
                                    <span>#2e7d32</span>
                                </li>

                                <li class="bg-green-700 list-group-item">
                                    <span>700</span> /
                                    <span>#388e3c</span>
                                </li>

                                <li class="bg-green-600 list-group-item">
                                    <span>600</span> /
                                    <span>#43a047</span>
                                </li>

                                <li class="bg-green-500 list-group-item">
                                    <span>500</span> /
                                    <span>#4caf50</span>
                                </li>

                                <li class="bg-green-400 grey-800 list-group-item">
                                    <span>400</span> /
                                    <span>#66bb6a</span>
                                </li>

                                <li class="bg-green-300 grey-800 list-group-item">
                                    <span>300</span> /
                                    <span>#81c784</span>
                                </li>

                                <li class="bg-green-200 grey-800 list-group-item">
                                    <span>200</span> /
                                    <span>#a5d6a7</span>
                                </li>

                                <li class="bg-green-100 grey-800 list-group-item">
                                    <span>100</span> /
                                    <span>#c8e6c9</span>
                                </li>

                                <li class="bg-green-50 grey-800 list-group-item">
                                    <span>50</span> /
                                    <span>#e8f5e9</span>
                                </li>
                            </ul>
                        </div>
                        <div class="col-sm-4 col-md-3">
                            <h5 class="text-uppercase">light-green</h5>
                            <ul class="list-group">
                                <li class="bg-light-green-a400 grey-800 list-group-item">
                                    <span>a400</span> /
                                    <span>#64dd17</span>
                                </li>
                                <li class="bg-light-green-a300 grey-800 list-group-item">
                                    <span>a300</span> /
                                    <span>#76ff03</span>
                                </li>
                                <li class="bg-light-green-a200 grey-800 list-group-item">
                                    <span>a200</span> /
                                    <span>#b2ff59</span>
                                </li>
                                <li class="bg-light-green-a100 grey-800 list-group-item">
                                    <span>a100</span> /
                                    <span>#ccff90</span>
                                </li>

                                <li class="bg-light-green-900 list-group-item">
                                    <span>900</span> /
                                    <span>#33691e</span>
                                </li>

                                <li class="bg-light-green-800 list-group-item">
                                    <span>800</span> /
                                    <span>#558b2f</span>
                                </li>

                                <li class="bg-light-green-700 list-group-item">
                                    <span>700</span> /
                                    <span>#689f38</span>
                                </li>

                                <li class="bg-light-green-600 list-group-item">
                                    <span>600</span> /
                                    <span>#7cb342</span>
                                </li>

                                <li class="bg-light-green-500 list-group-item">
                                    <span>500</span> /
                                    <span>#8bc34a</span>
                                </li>

                                <li class="bg-light-green-400 grey-800 list-group-item">
                                    <span>400</span> /
                                    <span>#9ccc65</span>
                                </li>

                                <li class="bg-light-green-300 grey-800 list-group-item">
                                    <span>300</span> /
                                    <span>#aed581</span>
                                </li>

                                <li class="bg-light-green-200 grey-800 list-group-item">
                                    <span>200</span> /
                                    <span>#c5e1a5</span>
                                </li>

                                <li class="bg-light-green-100 grey-800 list-group-item">
                                    <span>100</span> /
                                    <span>#dcedc8</span>
                                </li>

                                <li class="bg-light-green-50 grey-800 list-group-item">
                                    <span>50</span> /
                                    <span>#f1f8e9</span>
                                </li>
                            </ul>
                        </div>
                        <div class="col-sm-4 col-md-3">
                            <h5 class="text-uppercase">lime</h5>
                            <ul class="list-group">
                                <li class="bg-lime-a400 grey-800 list-group-item">
                                    <span>a400</span> /
                                    <span>#aeea00</span>
                                </li>
                                <li class="bg-lime-a300 grey-800 list-group-item">
                                    <span>a300</span> /
                                    <span>#c6ff00</span>
                                </li>
                                <li class="bg-lime-a200 grey-800 list-group-item">
                                    <span>a200</span> /
                                    <span>#eeff41</span>
                                </li>
                                <li class="bg-lime-a100 grey-800 list-group-item">
                                    <span>a100</span> /
                                    <span>#f4ff81</span>
                                </li>

                                <li class="bg-lime-900 list-group-item">
                                    <span>900</span> /
                                    <span>#827717</span>
                                </li>

                                <li class="bg-lime-800 list-group-item">
                                    <span>800</span> /
                                    <span>#9e9d24</span>
                                </li>

                                <li class="bg-lime-700 list-group-item">
                                    <span>700</span> /
                                    <span>#afb42b</span>
                                </li>

                                <li class="bg-lime-600 list-group-item">
                                    <span>600</span> /
                                    <span>#c0ca33</span>
                                </li>

                                <li class="bg-lime-500 list-group-item">
                                    <span>500</span> /
                                    <span>#cddc39</span>
                                </li>

                                <li class="bg-lime-400 grey-800 list-group-item">
                                    <span>400</span> /
                                    <span>#d4e157</span>
                                </li>

                                <li class="bg-lime-300 grey-800 list-group-item">
                                    <span>300</span> /
                                    <span>#dce775</span>
                                </li>

                                <li class="bg-lime-200 grey-800 list-group-item">
                                    <span>200</span> /
                                    <span>#e6ee9c</span>
                                </li>

                                <li class="bg-lime-100 grey-800 list-group-item">
                                    <span>100</span> /
                                    <span>#f0f4c3</span>
                                </li>

                                <li class="bg-lime-50 grey-800 list-group-item">
                                    <span>50</span> /
                                    <span>#f9fbe7</span>
                                </li>
                            </ul>
                        </div>
                        <div class="col-sm-4 col-md-3">
                            <h5 class="text-uppercase">yellow</h5>
                            <ul class="list-group">
                                <li class="bg-yellow-a400 grey-800 list-group-item">
                                    <span>a400</span> /
                                    <span>#ffd600</span>
                                </li>
                                <li class="bg-yellow-a300 grey-800 list-group-item">
                                    <span>a300</span> /
                                    <span>#ffea00</span>
                                </li>
                                <li class="bg-yellow-a200 grey-800 list-group-item">
                                    <span>a200</span> /
                                    <span>#ffff00</span>
                                </li>
                                <li class="bg-yellow-a100 grey-800 list-group-item">
                                    <span>a100</span> /
                                    <span>#ffff8d</span>
                                </li>

                                <li class="bg-yellow-900 list-group-item">
                                    <span>900</span> /
                                    <span>#f57f17</span>
                                </li>

                                <li class="bg-yellow-800 list-group-item">
                                    <span>800</span> /
                                    <span>#f9a825</span>
                                </li>

                                <li class="bg-yellow-700 list-group-item">
                                    <span>700</span> /
                                    <span>#fbc02d</span>
                                </li>

                                <li class="bg-yellow-600 list-group-item">
                                    <span>600</span> /
                                    <span>#fdd835</span>
                                </li>

                                <li class="bg-yellow-500 list-group-item">
                                    <span>500</span> /
                                    <span>#ffeb3b</span>
                                </li>

                                <li class="bg-yellow-400 grey-800 list-group-item">
                                    <span>400</span> /
                                    <span>#ffee58</span>
                                </li>

                                <li class="bg-yellow-300 grey-800 list-group-item">
                                    <span>300</span> /
                                    <span>#fff176</span>
                                </li>

                                <li class="bg-yellow-200 grey-800 list-group-item">
                                    <span>200</span> /
                                    <span>#fff59d</span>
                                </li>

                                <li class="bg-yellow-100 grey-800 list-group-item">
                                    <span>100</span> /
                                    <span>#fff9c4</span>
                                </li>

                                <li class="bg-yellow-50 grey-800 list-group-item">
                                    <span>50</span> /
                                    <span>#fffde7</span>
                                </li>
                            </ul>
                        </div>
                        <div class="col-sm-4 col-md-3">
                            <h5 class="text-uppercase">amber</h5>
                            <ul class="list-group">
                                <li class="bg-amber-a400 grey-800 list-group-item">
                                    <span>a400</span> /
                                    <span>#ffab00</span>
                                </li>
                                <li class="bg-amber-a300 grey-800 list-group-item">
                                    <span>a300</span> /
                                    <span>#ffc400</span>
                                </li>
                                <li class="bg-amber-a200 grey-800 list-group-item">
                                    <span>a200</span> /
                                    <span>#ffd740</span>
                                </li>
                                <li class="bg-amber-a100 grey-800 list-group-item">
                                    <span>a100</span> /
                                    <span>#ffe57f</span>
                                </li>

                                <li class="bg-amber-900 list-group-item">
                                    <span>900</span> /
                                    <span>#ff6f00</span>
                                </li>

                                <li class="bg-amber-800 list-group-item">
                                    <span>800</span> /
                                    <span>#ff8f00</span>
                                </li>

                                <li class="bg-amber-700 list-group-item">
                                    <span>700</span> /
                                    <span>#ffa000</span>
                                </li>

                                <li class="bg-amber-600 list-group-item">
                                    <span>600</span> /
                                    <span>#ffb300</span>
                                </li>

                                <li class="bg-amber-500 list-group-item">
                                    <span>500</span> /
                                    <span>#ffc107</span>
                                </li>

                                <li class="bg-amber-400 grey-800 list-group-item">
                                    <span>400</span> /
                                    <span>#ffca28</span>
                                </li>

                                <li class="bg-amber-300 grey-800 list-group-item">
                                    <span>300</span> /
                                    <span>#ffd54f</span>
                                </li>

                                <li class="bg-amber-200 grey-800 list-group-item">
                                    <span>200</span> /
                                    <span>#ffe082</span>
                                </li>

                                <li class="bg-amber-100 grey-800 list-group-item">
                                    <span>100</span> /
                                    <span>#ffecb3</span>
                                </li>

                                <li class="bg-amber-50 grey-800 list-group-item">
                                    <span>50</span> /
                                    <span>#fff8e1</span>
                                </li>
                            </ul>
                        </div>
                        <div class="col-sm-4 col-md-3">
                            <h5 class="text-uppercase">orange</h5>
                            <ul class="list-group">
                                <li class="bg-orange-a400 grey-800 list-group-item">
                                    <span>a400</span> /
                                    <span>#ff6d00</span>
                                </li>
                                <li class="bg-orange-a300 grey-800 list-group-item">
                                    <span>a300</span> /
                                    <span>#ff9100</span>
                                </li>
                                <li class="bg-orange-a200 grey-800 list-group-item">
                                    <span>a200</span> /
                                    <span>#ffab40</span>
                                </li>
                                <li class="bg-orange-a100 grey-800 list-group-item">
                                    <span>a100</span> /
                                    <span>#ffd180</span>
                                </li>

                                <li class="bg-orange-900 list-group-item">
                                    <span>900</span> /
                                    <span>#e65100</span>
                                </li>

                                <li class="bg-orange-800 list-group-item">
                                    <span>800</span> /
                                    <span>#ef6c00</span>
                                </li>

                                <li class="bg-orange-700 list-group-item">
                                    <span>700</span> /
                                    <span>#f57c00</span>
                                </li>

                                <li class="bg-orange-600 list-group-item">
                                    <span>600</span> /
                                    <span>#fb8c00</span>
                                </li>

                                <li class="bg-orange-500 list-group-item">
                                    <span>500</span> /
                                    <span>#ff9800</span>
                                </li>

                                <li class="bg-orange-400 grey-800 list-group-item">
                                    <span>400</span> /
                                    <span>#ffa726</span>
                                </li>

                                <li class="bg-orange-300 grey-800 list-group-item">
                                    <span>300</span> /
                                    <span>#ffb74d</span>
                                </li>

                                <li class="bg-orange-200 grey-800 list-group-item">
                                    <span>200</span> /
                                    <span>#ffcc80</span>
                                </li>

                                <li class="bg-orange-100 grey-800 list-group-item">
                                    <span>100</span> /
                                    <span>#ffe0b2</span>
                                </li>

                                <li class="bg-orange-50 grey-800 list-group-item">
                                    <span>50</span> /
                                    <span>#fff3e0</span>
                                </li>
                            </ul>
                        </div>
                        <div class="col-sm-4 col-md-3">
                            <h5 class="text-uppercase">deep-orange</h5>
                            <ul class="list-group">
                                <li class="bg-deep-orange-a400 grey-800 list-group-item">
                                    <span>a400</span> /
                                    <span>#dd2c00</span>
                                </li>
                                <li class="bg-deep-orange-a300 grey-800 list-group-item">
                                    <span>a300</span> /
                                    <span>#ff3d00</span>
                                </li>
                                <li class="bg-deep-orange-a200 grey-800 list-group-item">
                                    <span>a200</span> /
                                    <span>#ff6e40</span>
                                </li>
                                <li class="bg-deep-orange-a100 grey-800 list-group-item">
                                    <span>a100</span> /
                                    <span>#ff9e80</span>
                                </li>

                                <li class="bg-deep-orange-900 list-group-item">
                                    <span>900</span> /
                                    <span>#bf360c</span>
                                </li>

                                <li class="bg-deep-orange-800 list-group-item">
                                    <span>800</span> /
                                    <span>#d84315</span>
                                </li>

                                <li class="bg-deep-orange-700 list-group-item">
                                    <span>700</span> /
                                    <span>#e64a19</span>
                                </li>

                                <li class="bg-deep-orange-600 list-group-item">
                                    <span>600</span> /
                                    <span>#f4511e</span>
                                </li>

                                <li class="bg-deep-orange-500 list-group-item">
                                    <span>500</span> /
                                    <span>#ff5722</span>
                                </li>

                                <li class="bg-deep-orange-400 grey-800 list-group-item">
                                    <span>400</span> /
                                    <span>#ff7043</span>
                                </li>

                                <li class="bg-deep-orange-300 grey-800 list-group-item">
                                    <span>300</span> /
                                    <span>#ff8a65</span>
                                </li>

                                <li class="bg-deep-orange-200 grey-800 list-group-item">
                                    <span>200</span> /
                                    <span>#ffab91</span>
                                </li>

                                <li class="bg-deep-orange-100 grey-800 list-group-item">
                                    <span>100</span> /
                                    <span>#ffccbc</span>
                                </li>

                                <li class="bg-deep-orange-50 grey-800 list-group-item">
                                    <span>50</span> /
                                    <span>#fbe9e7</span>
                                </li>
                            </ul>
                        </div>

                        <div class="col-sm-4 col-md-3">
                            <h5 class="text-uppercase">brown</h5>
                            <ul class="list-group">
                                <li class="bg-brown-900 list-group-item">
                                    <span>900</span> /
                                    <span>#3e2723</span>
                                </li>
                                <li class="bg-brown-800 list-group-item">
                                    <span>800</span> /
                                    <span>#4e342e</span>
                                </li>
                                <li class="bg-brown-700 list-group-item">
                                    <span>700</span> /
                                    <span>#5d4037</span>
                                </li>
                                <li class="bg-brown-600 list-group-item">
                                    <span>600</span> /
                                    <span>#6d4c41</span>
                                </li>
                                <li class="bg-brown-500 list-group-item">
                                    <span>500</span> /
                                    <span>#795548</span>
                                </li>

                                <li class="bg-brown-400 grey-800 list-group-item">
                                    <span>400</span> /
                                    <span>#8d6e63</span>
                                </li>

                                <li class="bg-brown-300 grey-800 list-group-item">
                                    <span>300</span> /
                                    <span>#a1887f</span>
                                </li>

                                <li class="bg-brown-200 grey-800 list-group-item">
                                    <span>200</span> /
                                    <span>#bcaaa4</span>
                                </li>

                                <li class="bg-brown-100 grey-800 list-group-item">
                                    <span>100</span> /
                                    <span>#d7ccc8</span>
                                </li>

                                <li class="bg-brown-50 grey-800 list-group-item">
                                    <span>50</span> /
                                    <span>#efebe9</span>
                                </li>
                            </ul>
                        </div>

                        <div class="col-sm-4 col-md-3">
                            <h5 class="text-uppercase">grey</h5>
                            <ul class="list-group">
                                <li class="bg-grey-900 list-group-item">
                                    <span>900</span> /
                                    <span>#212121</span>
                                </li>
                                <li class="bg-grey-800 list-group-item">
                                    <span>800</span> /
                                    <span>#424242</span>
                                </li>
                                <li class="bg-grey-700 list-group-item">
                                    <span>700</span> /
                                    <span>#616161</span>
                                </li>
                                <li class="bg-grey-600 list-group-item">
                                    <span>600</span> /
                                    <span>#757575</span>
                                </li>
                                <li class="bg-grey-500 list-group-item">
                                    <span>500</span> /
                                    <span>#9e9e9e</span>
                                </li>

                                <li class="bg-grey-400 grey-800 list-group-item">
                                    <span>400</span> /
                                    <span>#bdbdbd</span>
                                </li>

                                <li class="bg-grey-300 grey-800 list-group-item">
                                    <span>300</span> /
                                    <span>#e0e0e0</span>
                                </li>

                                <li class="bg-grey-200 grey-800 list-group-item">
                                    <span>200</span> /
                                    <span>#eeeeee</span>
                                </li>

                                <li class="bg-grey-100 grey-800 list-group-item">
                                    <span>100</span> /
                                    <span>#f5f5f5</span>
                                </li>

                                <li class="bg-grey-50 grey-800 list-group-item">
                                    <span>50</span> /
                                    <span>#fafafa</span>
                                </li>
                            </ul>
                        </div>

                        <div class="col-sm-4 col-md-3">
                            <h5 class="text-uppercase">blue-grey</h5>
                            <ul class="list-group">
                                <li class="bg-blue-grey-900 list-group-item">
                                    <span>900</span> /
                                    <span>#263238</span>
                                </li>
                                <li class="bg-blue-grey-800 list-group-item">
                                    <span>800</span> /
                                    <span>#37474f</span>
                                </li>
                                <li class="bg-blue-grey-700 list-group-item">
                                    <span>700</span> /
                                    <span>#455a64</span>
                                </li>
                                <li class="bg-blue-grey-600 list-group-item">
                                    <span>600</span> /
                                    <span>#546e7a</span>
                                </li>
                                <li class="bg-blue-grey-500 list-group-item">
                                    <span>500</span> /
                                    <span>#607d8b</span>
                                </li>

                                <li class="bg-blue-grey-400 grey-800 list-group-item">
                                    <span>400</span> /
                                    <span>#78909c</span>
                                </li>

                                <li class="bg-blue-grey-300 grey-800 list-group-item">
                                    <span>300</span> /
                                    <span>#90a4ae</span>
                                </li>

                                <li class="bg-blue-grey-200 grey-800 list-group-item">
                                    <span>200</span> /
                                    <span>#b0bec5</span>
                                </li>

                                <li class="bg-blue-grey-100 grey-800 list-group-item">
                                    <span>100</span> /
                                    <span>#cfd8dc</span>
                                </li>

                                <li class="bg-blue-grey-50 grey-800 list-group-item">
                                    <span>50</span> /
                                    <span>#eceff1</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- End Example Color Palette -->


                <div class="color-application">
                    <h3>Color Application</h3>
                    <div class="row row-lg">
                        <div class="col-lg-6">
                            <!-- Example Choose Your Palette -->
                            <div class="example-wrap">
                                <h4 class="example-title">Choose Your Palette</h4>
                                <p>Limit your selection of colors by choosing three color hues from
                                    the primary palette and one accent color from the secondary
                                    palette. The accent may or may not need fallback options.</p>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="example-wrap">
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <p>Active color</p>
                                                    <span>#3949ab</span>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="bg-indigo-600 color-box">600</div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <p>Base color</p>
                                                    <span>#3f51b5</span>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="bg-indigo-500 color-box">500</div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <p>Hover color</p>
                                                    <span>#5c6bc0</span>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="bg-indigo-400 color-box">400</div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <p>Background opt.</p>
                                                    <span>#c5cae9</span>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="bg-indigo-100 color-box grey-700">100</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="example-wrap">
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <p>Active color</p>
                                                    <span>#e53935</span>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="bg-red-600 color-box">600</div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <p>Base color</p>
                                                    <span>#f44336</span>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="bg-red-500 color-box">500</div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <p>Hover color</p>
                                                    <span>#ef5350</span>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="bg-red-400 color-box">400</div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <p>Background opt.</p>
                                                    <span>#ffcdd2</span>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="bg-red-100 color-box grey-700">100</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End Example Choose Your Palette -->
                        </div>

                        <div class="col-lg-6">
                            <!-- Example Text Color -->
                            <div class="example-wrap">
                                <h4 class="example-title">Text Color</h4>
                                <p>To convey a hierarchy of information, you can use different shades
                                    for text. The standard content text color is #79838B.</p>
                                <div class="row margin-bottom-20">
                                    <div class="col-sm-3">
                                        <div class="example">
                                            <div class="bg-grey-800 text-color-box"></div>
                                            <p>Title color</p>
                                            <span>#424242</span>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="example">
                                            <div class="bg-grey-700 text-color-box"></div>
                                            <p>Subtitle color</p>
                                            <span>#616161</span>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="example">
                                            <div class="bg-grey-600 text-color-box"></div>
                                            <p>Text color</p>
                                            <span>#757575</span>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="example">
                                            <div class="bg-grey-500 text-color-box"></div>
                                            <p>Prompt color</p>
                                            <span>#9e9e9e</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End Example Text Color -->
                        </div>

                        <div class="clearfix visible-lg-block"></div>

                        <div class="col-lg-6">
                            <!-- Example Use Alpha -->
                            <div class="example-wrap margin-lg-0">
                                <h4 class="example-title">Use Alpha For Icons, And Dividers</h4>
                                <p>Icons and dividers, also benefit from having an alpha value of
                                    black instead of a solid color, to make sure the color below.</p>
                                <div class="row">
                                    <div class="col-lg-6 margin-bottom-10">
                                        <div class="example">
                                            <div class="bg-grey-800 example-alpha">Grey Darkest</div>
                                            <div class="row opacity-example">
                                                <div class="col-sm-6">
                                                    <p>
                                                        <span>Normal:</span>
                                                        <span class="opacity-four"><i class="icon md-image" aria-hidden="true"></i>40%</span>
                                                    </p>
                                                    <p>
                                                        <span>Hover:</span>
                                                        <span class="opacity-six"><i class="icon md-image" aria-hidden="true"></i>60%</span>
                                                    </p>
                                                    <p>
                                                        <span>Active:</span>
                                                        <span class="grey-800"><i class="icon md-image" aria-hidden="true"></i>100%</span>
                                                    </p>
                                                </div>
                                                <div class="col-sm-6">
                                                    <p>
                                                        <span>Normal:</span>
                                                        <span class="opacity-six"><i class="icon md-image" aria-hidden="true"></i>60%</span>
                                                    </p>
                                                    <p>
                                                        <span>Hover:</span>
                                                        <span class="opacity-eight"><i class="icon md-image" aria-hidden="true"></i>80%</span>
                                                    </p>
                                                    <p>
                                                        <span>Active:</span>
                                                        <span class="grey-800"><i class="icon md-image" aria-hidden="true"></i>100%</span>
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="example">
                                            <div class="bg-grey-900 example-alpha">Gray Base</div>
                                            <div class="example-alpha example-divider grey-600">Dividers 10%</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End Example Use Alpha -->
                        </div>
                        <div class="col-lg-6">
                            <!-- Example Border Color -->
                            <div class="example-wrap">
                                <h4 class="example-title">Border Color</h4>
                                <p>Border color should use the primary #E6E8EA color, which should
                                    be the main color of your project.</p>
                                <div class="example-border">
                                    <div class="bg-grey-300"></div>
                                    <div>
                                        <p>Border color</p>
                                        <span>#e0e0e0</span>
                                    </div>
                                </div>
                            </div>
                            <!-- End Example Border Color -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Panel -->
    </div>
</div>
<!-- End Page -->


<!-- Footer -->
<footer class="site-footer">
    <div class="site-footer-legal">© 2016 <a href="http://themeforest.net/item/remark-responsive-bootstrap-admin-template/11989202">Remark</a></div>
    <div class="site-footer-right">
        Crafted with <i class="red-600 icon md-favorite"></i> by <a href="http://themeforest.net/user/amazingSurge">amazingSurge</a>
    </div>
</footer>
<!-- Core  -->
<script src="../../global/vendor/jquery/jquery.min.js"></script>
<script src="../../global/vendor/bootstrap/bootstrap.min.js"></script>
<script src="../../global/vendor/animsition/animsition.min.js"></script>
<script src="../../global/vendor/asscroll/jquery-asScroll.min.js"></script>
<script src="../../global/vendor/mousewheel/jquery.mousewheel.min.js"></script>
<script src="../../global/vendor/asscrollable/jquery.asScrollable.all.min.js"></script>
<script src="../../global/vendor/ashoverscroll/jquery-asHoverScroll.min.js"></script>
<script src="../../global/vendor/waves/waves.min.js"></script>

<!-- Plugins -->
<script src="../../global/vendor/switchery/switchery.min.js"></script>
<script src="../../global/vendor/intro-js/intro.min.js"></script>
<script src="../../global/vendor/screenfull/screenfull.min.js"></script>
<script src="../../global/vendor/slidepanel/jquery-slidePanel.min.js"></script>

<!-- Scripts -->
<script src="../../global/js/core.min.js"></script>
<script src="../assets/js/site.min.js"></script>

<script src="../assets/js/sections/menu.min.js"></script>
<script src="../assets/js/sections/menubar.min.js"></script>
<script src="../assets/js/sections/gridmenu.min.js"></script>
<script src="../assets/js/sections/sidebar.min.js"></script>

<script src="../../global/js/configs/config-colors.min.js"></script>
<script src="../assets/js/configs/config-tour.min.js"></script>

<script src="../../global/js/components/asscrollable.min.js"></script>
<script src="../../global/js/components/animsition.min.js"></script>
<script src="../../global/js/components/slidepanel.min.js"></script>
<script src="../../global/js/components/switchery.min.js"></script>
<script src="../../global/js/components/tabs.min.js"></script>


<script>
    (function(document, window, $) {
        'use strict';

        var Site = window.Site;
        $(document).ready(function() {
            Site.run();
        });
    })(document, window, jQuery);
</script>



</body>

</html>